<template>
    <div class="shop-container">
    <!-- 顶部内容 -->
    <div class="header">
      <h1>欢迎来到商城</h1>
      <p>精选优质商品，畅享便捷购物体验</p>
    </div>

    <!-- 主内容区域 -->
    <router-view class="content-area" />

    <!-- 底部导航栏 -->
    <el-menu
      :default-active="$route.path"
      mode="horizontal"
      class="bottom-nav"
      @select="handleNavSelect"
    >
      <el-menu-item index="/">
        <i class="iconfont icon-shop"></i>
        <span>商城</span>
      </el-menu-item>
      <el-menu-item index="/edu">
        <i class="iconfont icon-edu"></i>
        <span>农教</span>
      </el-menu-item>
      <el-menu-item index="/community">
        <i class="iconfont icon-community"></i>
        <span>社区</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const handleNavSelect = (key: string) =>{
if (key === '/') {
    //保持在当前页面
    router.replace({ path: '/'})
} else {
    router.push(key)
}
}
</script>

<style scoped>
.shop-container {
  min-height: 100vh;
}

.content-area {
  padding: 20px;
  margin-bottom: 80px; /* 为导航留出空间 */
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.el-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 80px !important;
  transition: transform 0.3s;
}

.el-menu-item:hover {
  transform: translateY(-5px);
}

.el-menu-item i {
  font-size: 28px;
  margin-bottom: 6px;
  color: #666;
}

.el-menu-item span {
  font-size: 12px;
  color: #666;
}

/* 当前选中状态 */
.el-menu-item.is-active {
  border-bottom: 4px solid #409EFF;
}

.el-menu-item.is-active i {
  color: #409EFF !important;
}

.el-menu-item.is-active span {
  color: #409EFF !important;
}

</style>